<template>
  <div class="process-management">
    <el-row
      style="margin-bottom: 10px"
      type="flex"
      align="top"
      justify="space-between"
    >
      <processSteps :list="processList" @change="changeProcess" />
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="阶段"
        align="center"
        prop="periodName"
        width="120"
      />
      <el-table-column
        label="计划开始时间"
        align="center"
        prop="planStartTime"
      />
      <el-table-column label="计划结束时间" align="center" prop="planEndTime" />
      <el-table-column label="审批结果" align="center" width="100">
        <template slot-scope="{ row }">
          {{ row.status == null ? "" : row.status == 1 ? "已驳回" : "已通过" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.status == null"
            size="mini"
            type="primary"
            plain
            @click="agreeProcess(row, 0)"
          >
            通过
          </el-button>
          <el-button
            v-if="row.status == null"
            size="mini"
            type="danger"
            plain
            @click="agreeProcess(row, 1)"
          >
            驳回
          </el-button>
          <el-button size="mini" type="primary" plain @click="seeProcess(row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="500px"
      title="详情"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form" :model="form" label-width="9em" label-suffix=":">
        <el-form-item label="阶段">{{ form.periodName }}</el-form-item>
        <el-form-item label="负责人">{{ form.userName }}</el-form-item>
        <el-form-item label="计划开始时间">
          {{ form.planStartTime }}
        </el-form-item>
        <el-form-item label="计划结束时间">
          {{ form.planEndTime }}
        </el-form-item>
        <el-form-item
          label="成果文件"
          style="display: flex; align-items: center"
        >
          <p style="cursor: pointer;" v-for="(i, index) in form.periodAppendix" :key="index">
            <span @click="handlePreview(i)">{{ i.name }}</span>
          </p>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProjectPeriod,
  getPeriodDetails,
  apiResultReview, // 成果审核
} from "@/api2/projectManagement/process";
import processSteps from "../../../components/processSteps.vue";

export default {
  inject: ["projectId"],
  components: { processSteps },
  data() {
    return {
      processList: [],
      tableData: [],
      listLoading: false,
      visible: false,
      periodId: "",
      form: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handlePreview(uploadFile) {
      window.open(uploadFile.url);
    },
    // 查看详情
    seeProcess(row) {
      this.visible = true;
      this.form = row;
      this.form.periodAppendix = JSON.parse(this.form.periodAppendix);
    },

    agreeProcess(row, index) {
      let params = {
        approveResult: index,
        period: row.periodId,
        periodDetailsId: row.periodDetailsId,
      };
      apiResultReview(params)
        .then((res) => {
          if (res.code == 0) {
            this.msgSuccess("操作成功");
            this.getList();
          } else {
            this.msgError("操作失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.msgError("操作失败");
        });
    },
    async changeProcess(periodId) {
      this.periodId = periodId;
      this.listLoading = true;
      const res = await getPeriodDetails({ periodId });
      this.tableData = res.data;
      this.listLoading = false;
    },
    getList() {
      getProjectPeriod({ projectId: this.projectId }).then(async (data) => {
        this.processList = data.data;
        const periodId = data.data[0]?.periodId;
        this.changeProcess(periodId);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
.dialog-footer {
  margin-bottom: 0;
  text-align: center;
  ::v-deep {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
